<template>
  <div class="navigation-bar">
    <img src="~assets/img/logo.jpg" alt="logo" height="70" width="324"/>
    <ul class="nav-menu">
      <li v-for="(item,index) in menu" :key="item"  :class="{active: navigationIndex==index}" @click="clickMenu(index)">
        {{item}}
      </li>
    </ul>
    <div class="nav-info">
      <span class="welcome">{{"欢迎,"+nickName}}</span>
      <span class="logout" @click="logout">退出</span>
    </div>
  </div>


</template>

<script>
import {mapMutations, mapState} from 'vuex'
import avatar from '@/assets/img/avatar.jpg'
export default {
  name: "NavigationBar",
  props:{
    nickName:{
      type: String,
      default: "后台管理员"
    }
  },
  computed:{
    ...mapState(['navigationIndex'])
  },
  data() {
    return {
      menu: ["业务桌面", "门户管理", "系统管理", "我的信息"],
      menuPath:['business/order','portal/article','system/administrator','profile'],
      currentIndex: 0
    };
  },
  methods:{
    ...mapMutations(['changeNavigationIndex','changeAvatar']),
    //点击菜单项
    clickMenu(index){
      this.changeNavigationIndex(index);
      this.$router.replace('/'+this.menuPath[index]);
    },
    //退出
    logout() {
      this.$confirm('确认要退出法务服务平台管理系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.localStorage.removeItem("admin");
        this.changeAvatar(avatar);  //恢复默认的图片
        this.$router.replace("/login");
      })
    }
  },
  created(){  //获取登录的信息
    let admin = window.localStorage.getItem("admin");
    if(admin){
      this.nickName = JSON.parse(admin).ad_uname;
    }else{
      this.nickName = "后台管理员";
    }
  }
}
</script>

<style scoped>
.active{
  background-color: rgb(4,22,58);
}
.navigation-bar{
  height: 50px;
  display: flex;
  justify-content: space-between;
  /*padding-right:10px;*/
  color: white;
  background-color: rgb(55,75,118);
  line-height: 50px;
}
.navigation-bar img{
  width: 188px;
  height: 50px;
  /*margin-right: 12px;*/
}
.navigation-bar .nav-menu{
  flex:1;
  display: flex;
  justify-content: flex-start;
}
.nav-menu li{
  padding: 0 18px;
  font-size: 16px;
  cursor:pointer
}
.navigation-bar .nav-info .welcome{
  margin-right: 10px;
}
.nav-info .logout{
  padding: 0 10px;
  cursor:pointer;
  padding: 16px 20px;
  margin-right:0px;
}
</style>
